<template>
	<view class="content">
		<view class="navBox paddingContent">
			<view @click="$TOOL.backPageRefresh()">
				<cicon name="return" :size="46"></cicon>
			</view>
			<view>
				服务器管理
			</view>
			<view class="moreActBox">
				 
			</view> 
		</view>
		
		<view class="listBox paddingContent">
			<view class="item" @click="goServer(item)" v-for="(item,index) in serverList">
				<view>
					<view>
						<image :src="defaultCover" mode="aspectFill"></image>
					</view>
					<view>
						<view>{{item.hostname}}</view>
						<view>
							{{item.host}}
						</view>
					</view>
				</view>
				
				<view @click.stop="actObj=item;actIndex=index;deleteShow=true">
					<cicon name="delete" color="#FF5757" :size="32"></cicon>
				</view>
			</view>
		</view>
		
		 
		
		<uni-transition class="dialog" @click="deleteShow=false" mode-class="fade" :show="deleteShow">
			<view class="editBox" @click.stop="()=>{return false}">	
				<view>删除{{actObj.hostname}}</view>
				<text>{{actObj.hostname}}</text>
				<view>
					<view @click="deleteShow=false">取消</view>
					<view @click="deleted">确定</view>
				</view>
			</view>
		</uni-transition>
		 
	</view>
</template>

<script>
	 
	import defaultCover from '@/static/server.png'
	export default {
		 
		data() {
			return {
				defaultCover,
				serverList:[],
				showDialog:false,
				actObj:[],
				deleteShow:false,
				actIndex:null
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			getList(){
				this.serverList = this.$TOOL.serverManage.list()
			}, 
			
			deleted(){
				this.$TOOL.serverManage.del(this.actIndex)
				this.deleteShow = false
				this.$TOOL.msg('删除成功')
				this.getList() 
			},
			
			goServer(server){
				if(server.host===this.$TOOL.data.get('server_url')){
					uni.redirectTo({
						url: '/pages/index/index'
					});
					 
				}else{
					//重新登录到新的服务器
					uni.request({
						url: server.host+this.$API.login.url, //仅为示例，并非真实接口地址。
						data: {
							account:server.userList[0].account,
							passwd:server.userList[0].passwd,
						},success: (e) => {
							if(e.data.success){
								this.$TOOL.data.set('server_url',server.host)
								this.$TOOL.data.set('sdid',e.data.data)
								this.$TOOL.data.set('username',server.userList[0].account)
								
								uni.redirectTo({
									url: '/pages/index/index'
								});
								
							}else{
								this.$TOOL.msg('当前服务器暂时无法登录')
							}
							
						}
					});
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.listBox{
		height: calc( 100vh - 220rpx);
		padding-top: 40rpx; 
		overflow-y: auto;
		.item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx;
			transition: 0.3s;
			background: #ffffff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			>view{
				&:first-child{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					width: calc( 100% - 66rpx);
					image{
						width: 90rpx;
						height: 90rpx;
						border-radius: 12rpx;
						display: block;
					}
					>view{
						 
						&:last-child{
						   margin-left: 24rpx;
						   width: calc(100% - 124rpx);
						   >view{
							   &:first-child{
								   font-size: 30rpx;
								   font-weight: 700;
								   white-space: nowrap; 
								   width: 100%; 
								   overflow: hidden;
								   text-overflow:ellipsis;
								   
							   }
							   &:last-child{
								   font-size: 22rpx;
								   font-weight: 400;
								   margin-top: 8rpx;
								   display: flex;
								   align-items: center;
								   justify-content: flex-start;
								   
								    
								   
								   
							   }
						   }
						}
					}
				}
				
				&:last-child{
					width:80rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
				}
			}
		}
	}
	
	
	.moreActBox{
		position: relative;
		.actNavBox{
			background: #fff;
			padding: 20rpx 30rpx;
			position: absolute;
			right: 0;
			top: 60rpx;
			width: 160rpx;
			box-shadow: 0 0 12px #0000001f; 
			border-radius: 16rpx;
			>view{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26rpx;
				font-weight: 500;
				margin-bottom: 10rpx;
				padding: 10rpx 0;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
	}
	
	
	
</style>
